<template>
    <view class="home">
        <view class="header">
            <view class="header-status"></view>
            <view class="header-main">
                <view class="header-left">
                    <view class="h-position" :class="{active: position == item}" v-for="(item,index) in positions"
                        :key="index" @click="changePosition(item);">{{item}}</view>
                </view>
                <view class="header-right" @click="_toView('login/step3')">
                    <u-icon name="plus" color="#fff" size="20"></u-icon>
                </view>
            </view>
        </view>

        <!-- 筛选栏 -->
        <view class="filter">
            <text class="recomBtn">推荐</text>
            <view class="city">
                <!-- <view class="uni-input" @tap="_toView('views/home/workPlace')">{{area.city}}
                    <view class="down">

                    </view>
                </view> -->
                <view class="uni-input" style="margin-left: 30rpx;" @tap="_toView('views/home/condition')">
                    筛选{{filter_num ? '·'+filter_num : ''}}
                    <view class="down">

                    </view>
                </view>
            </view>
        </view>

        <view class="cards">
            <view class="cardItem" v-for="(item, index) in list" :key="index"
                @tap="_toView('views/detail/index?id=' + item.id)">
                <view class="title mdTitle Han">
                    <view class="title-l">{{item.title}}</view>
                    <view class="salary">{{item.salary_min}}-{{item.salary_max}}K</view>
                </view>
                <view class="msg Han mdText" v-if="item.company">
                    <text>{{item.company.shortname}}</text>
                    <text>{{item.company.rzjd}}</text>
                    <text>{{item.company.gsgm}}</text>
                </view>

                <view class="tags mdText Han">
                    <view class="tag">
                        {{item.position}}
                    </view>
                    <view class="tag">
                        {{item.gzjy == '不限' ? '经验不限' : item.gzjy}}
                    </view>
                    <view class="tag">
                        {{item.zgxl == '不限' ? '学历不限' : item.zgxl}}
                    </view>
                </view>

                <view class="hr" v-if="item.company">
                    <image :src="item.company.logo" mode=""></image>
                    <view>{{item.company.shortname || item.company.name}}</view>
                    <view class="position md2Text Han">{{item.city}}{{item.dist}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                page: 1,
                list: [],
                is_ajax: false,
                is_over: false,

                eduArr: [],
                salary: '',
                expArr: [],
                filter_num: 0,

                dist: '',

                positions: [],
                position: '',

                resume: {},

                first_show: true,

                is_refresh: false,
            };
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function(options) {
            this.getUserInfo();
        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function() {

        },

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function() {
            if (this.first_show) {
                this.first_show = false;
            } else {
                var is_change = false;
                // var current_area = uni.getStorageSync('current_area');
                // if(current_area) {
                //     if (current_area.city != this.area.city) {
                //         this.area = current_area;

                //         is_change = true;
                //     }
                // }

                var filter = uni.getStorageSync('filter');
                if (filter) {
                    if (filter.eduArr != this.eduArr || filter.salary != this.salary || filter.expArr != this
                        .expArr) {
                        this.eduArr = filter.eduArr;
                        this.salary = filter.salary;
                        this.expArr = filter.expArr;
                        this.filter_num = this.eduArr.length + this.expArr.length + (this.salary ? 1 : 0);
                        is_change = true;
                    }
                }

                var resume = uni.getStorageSync('resume');
                if (resume) {
                    var positions = [];
                    for (var i in resume.positions) {
                        positions.push(resume.positions[i].position);
                    }
                    if (this.positions.join(',') != positions.join(',')) {
                        this.positions = positions;
                        if (this.positions.indexOf(this.position) === -1) {
                            this.position = positions[0] || '';
                        }
                        is_change = true;
                    }

                    if (resume.dist && this.dist != resume.dist) {
                        this.dist = resume.dist;
                        is_change = true;
                    }
                } else {
                    is_change = false;
                    this.getUserInfo();
                }
                console.log(is_change);
                //重新加载数据
                if (is_change) {
                    this.getList(1);
                }
            }
        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function() {},

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function() {},

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function() {
            this.is_refresh = true;
            this.getList(1);
        },

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function() {
            this.getList();
        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function() {},
        methods: {
            changePosition(v) {
                if (v && this.position !== v) {
                    this.position = v;
                    this.getList(1);
                }
            },
            getList(reset) {
                if (reset) {
                    this.page = 1;
                    this.list = [];
                    this.is_ajax = false;
                    this.is_over = false;
                }
                if (this.is_ajax || this.is_over || this.positions.length == 0) return false;
                this.is_ajax = true;
                this._ajax({
                    url: '/api/index/getJobList',
                    data: {
                        page: this.page,
                        dist: this.dist || '',
                        positions: this.position,
                        edu: this.eduArr.join(','),
                        exp: this.expArr.join(','),
                        salary: this.salary
                    },
                    success: res => {
                        if (this.is_refresh) {
                            this.is_refresh = false;
                            uni.stopPullDownRefresh();
                        }
                        if (res.code == 1) {
                            this.list = this.list.concat(res.data);
                            this.page++;
                        } else {
                            this._toast(res.msg);
                            this.is_over = true;
                        }
                        this.is_ajax = false;
                    }
                })
            },
            getUserInfo() {
                this._ajax({
                    url: '/api/user/userinfo',
                    success: res => {
                        if (res.code == 1) {
                            uni.setStorageSync('user', res.data);
                            var pages = ['login/role', 'login/step1', 'login/step2', 'login/step3',
                                'login/step4', 'login/step5'
                            ];
                            if (pages[res.data.step]) {
                                this._toRedirect(pages[res.data.step]);
                            } else {
                                this.getResume();


                                this.getUnreadNum();
                                setInterval(() => {
                                    this.getUnreadNum();
                                }, 3000);
                            }
                        }
                    }
                });
            },
            getResume() {
                this._ajax({
                    url: '/api/user/resume',
                    success: res => {
                        if (res.code == 1) {
                            this.resume = res.data;
                            uni.setStorageSync('resume', this.resume);
                            //默认城市
                            this.dist = this.resume.dist;
                            //职位
                            var positions = [];
                            for (var i in this.resume.positions) {
                                positions.push(this.resume.positions[i].position);
                            }
                            this.positions = positions;
                            if (this.positions.indexOf(this.position) === -1) {
                                this.position = positions[0] || '';
                            }
                            this.getList();
                        }
                    }
                });
            },
            getUnreadNum() {
                if (!uni.getStorageSync('token')) {
                    return false;
                }
                // console.log('getUnreadNum');
                this._ajax({
                    url: '/api/user/getUnreadNum',
                    success: res => {
                        if (res.code == 1) {
                            let num = parseInt(res.data) || 0;
                            if (num > 0) {
                                uni.setTabBarBadge({
                                    index: 2,
                                    text: '' + num
                                });
                            } else {
                                uni.removeTabBarBadge({
                                    index: 2
                                });
                            }
                            //#ifdef APP-PLUS
                            if (num == 0 && plus.device.vendor && plus.device.vendor.toUpperCase() == 'VIVO') {
                                num = -1;
                            }
                            plus.runtime.setBadgeNumber(num);
                            //#endif
                        }
                    }
                });
            },
        }
    };
</script>
<style scoped lang="less">
    .home {
        background-color: #f9f9f9;
        padding-top: calc(85px + var(--status-bar-height));
    }

    .header {
        width: 100%;
        background-color: #3f6bb0;
        color: #fff;
        padding: 0 30rpx;
        z-index: 9;
        position: fixed;
        top: 0;
        left: 0;

        .header-status {
            height: var(--status-bar-height);
        }

        .header-main {
            height: 45px;
            display: flex;
            align-items: center;

            .header-left {
                flex: 1;
                font-size: 32rpx;
                overflow-y: hidden;
                display: flex;
                align-items: center;

                .h-position {
                    white-space: nowrap;
                    word-break: keep-all;
                    line-height: 36px;
                    color: #f5f5f5;
                }

                .h-position.active {
                    font-weight: bold;
                    color: #fff;
                }

                .h-position+.h-position {
                    margin-left: 30rpx;
                }
            }

            .header-right {
                margin-left: 30rpx;
            }
        }
    }

    .filter {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding: 0 30upx;
        position: fixed;
        top: calc(45px + var(--status-bar-height));
        left: 0;
        z-index: 9;


        .recomBtn {
            font-size: 26upx;
            color: #3767b2;
        }

        .city {
            color: #999999;
            font-size: 26upx;
            display: flex;
            // width: 215upx;
            justify-content: space-between;

            .down {
                display: inline-block;
                width: 0;
                height: 0;
                border-top: 15upx solid #707070;
                border-left: 15upx solid transparent;
                border-right: 15upx solid transparent;
                margin: 5upx 0 0 10upx;
            }
        }
    }

    .cardItem {
        width: 100%;
        background-color: #fff;
        margin: 10upx auto;
        padding: 30rpx;
        position: relative;

        .title {
            color: #333;
            font-weight: normal;

            display: flex;
            align-items: flex-start;

            .title-l {
                flex: 1;
                margin-right: 20rpx;
            }

            .salary {
                color: #3f6bb0;
                margin-left: auto;
            }
        }

        .msg {
            padding-top: 20upx;
            color: #999999;

            text {
                padding-right: 30upx;
            }
        }

        .tags {
            display: flex;
            margin-top: 24upx;

            .tag {
                padding: 0 15upx;
                height: 45upx;
                line-height: 45upx;
                text-align: center;
                background-color: #F3FAFF;
                margin-right: 20upx;
            }
        }

        .hr {
            margin-top: 20rpx;
            display: flex;
            align-items: center;

            image {
                width: 72upx;
                height: 72upx;
                vertical-align: middle;
                margin-right: 20rpx;
                border-radius: 50%;
            }

            .position {
                color: #999;
                margin-left: auto;
            }
        }
    }
</style>
